July 16, 2023   BLOGGER , CSS , DOWNLOAD , HTML , JAVASCRIPT

[BLOGGER] Share Code DOWNLOAD With .Zip File On Blogspot Very Beautiful

Hi mọi người, ngày chủ nhật lang thang trên internet để xem một ích tài liệu liên quan, ai ngờ thấy có bài viết chia sẽ thủ thuật tạo button...

Hi mọi người, ngày chủ nhật lang thang trên internet để xem một ích tài liệu liên quan, ai ngờ thấy có bài viết chia sẽ thủ thuật tạo button download cũng đẹp mắt cho người dùng internet.

Phía trên là hình ảnh demo của thủ thuật này. Các bạn cảm thấy thế nào, mình thấy cũng chất chơi thật đó :D.

HƯỚNG DẪN CÁCH THỰC HIỆN.

Bước 1: Các bạn truy cập vào trang quản trị của bạn tiếp đó vào phần "CHỦ ĐỀ", mủi tên đỗ xuống bạn chọn chỉnh sữa HTML.
Bước 2: Các bạn copy toàn bộ CSS ở phía bên dưới bỏ vào trước thẻ đống "</body>"

 <style type='text/css'>
	.codepro-icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}.codepro-icon.codepro-download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}.codepro-downloadInfo{max-width:500px;background-color:#fefefe;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:6px;padding:15px;margin-top:20px;margin-bottom:20px;display:flex;align-items:center;line-height:1.8em;font-size:14px}.codepro-downloadInfo a,.codepro-downloadInfo .codepro-fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#f1f1f0;border-radius:10px}.codepro-downloadInfo a{background-color:#1e1e1e;color:#fefefe;margin:0;padding:10px 12px;border-radius:3px;width:auto;height:auto;line-height:20px;font-size:13px;text-decoration:none}.codepro-downloadInfo a:after{content:attr(aria-label)}.codepro-downloadInfo .codepro-fileType:before{content:attr(data-text)}.codepro-downloadInfo .codepro-fileName{flex-grow:1;width:calc(100% - 150px);padding:0 15px}.codepro-downloadInfo .codepro-fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.codepro-downloadInfo .codepro-fileSize{line-height:1.4em;font-size:12px;opacity:.8}.darkMode .codepro-downloadInfo{background-color:#2d2d30;border:0}.darkMode .codepro-downloadInfo .codepro-fileType{background-color:#1e1e1e}@media screen and (max-width:480px){.codepro-downloadInfo{padding:12px}.codepro-downloadInfo a{width:50px;height:50px;border-radius:10px}.codepro-downloadInfo a:after{display:none}.codepro-downloadInfo a .codepro-icon{margin:0}}
  </style>    

Và sau đó bạn lưu lại toàn bộ giao diện.
Bước 3: Khi các bạn vào bài đăng trên blog, bạn sữ dụng mã code sau để nó hiển thị nơi bạn muốn trong bài viết.

<div class='codepro-downloadInfo'>
    <span class='codepro-fileType' data-text='zip'></span>
    <div class='codepro-fileName'>
        <span>codepro.zip</span>
        <span class='codepro-fileSize'>1000GB</span>
    </div>
    <a aria-label='Download' href='#link'><i class='codepro-icon codepro-download'></i></a>
</div>

DEMO TẠI ĐÂY.

codepro.zip 1000GB

Lời kết: Như vậy bạn đã hoàn thành thủ thuật này rồi, và các bạn tùy biến màu sắc và khung theo khả năng của bản thân nhé, như vậy đoạn code trên sẽ tạo cho blog của bạn có một nút download đẹp và hiển thị rỏ thông tin chương trình được tải về.

Copyright @ 2015 By BomKhung.BlogSpot.Com